{% extends "base.html" %}
{% block title %}Kylin数据分析{% endblock %}
{% block headpre %}
    <link rel="stylesheet" href="static/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="static/plugins/datatables/dataTables.bootstrap.css">
{% endblock %}
{% block head %}
    <script src="static/js/jquery.ba-resize.js"></script>
    <script src="static/plugins/echarts.min.js"></script>
    <script src="static/plugins/walden.js"></script>
    <script src="static/plugins/select2/select2.min.js"></script>
    <script src="static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="static/plugins/datatables/dataTables.bootstrap.min.js"></script>
{% endblock %}
{% block contentheader %}Kylin数据分析{% endblock %}
{% block contentsmallheader %}在已创建好的Kylin Cube上做数据分析{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-3">
            <div class="box box-primary ng-scope" style="min-width:360px;">
                <div class="box-header with-border">
                    <h5 class="box-title">选择模型、维度、度量及条件</h5>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <div class="input-group-addon"
                             style="color:white;background-color: #3c8dbc;border-color: #367fa9">
                            &nbsp;&nbsp;Cubes：&nbsp;&nbsp;
                        </div>
                        <select class="form-control select2" style="width: 100%;" id="select_cubes">

                        </select>
                    </div>
                    <div class="callout callout-info" id="table_desc">
                        <p style="word-wrap:break-word;word-break:break-all;">
                        </p>
                    </div>
                    <hr style="width:100%;height:1px;border:none;border-top:1px solid #555555;"/>
                    <div class="nav-tabs-custom" style="margin-bottom: 0px">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#home" data-toggle="tab">
                                选项</a></li>
                            <li><a href="#ios" data-toggle="tab">SQL</a></li>

                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="home">
                                <div class="form-group">
                                    <div class="input-group-addon"
                                         style="color:white;background-color: #3c8dbc;border-color: #367fa9">
                                        计&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;算：
                                    </div>
                                    <select class="form-control select2" style="width: 100%" id="compute">
                                        <option value="SUM">SUM</option>
                                        <option value="COUNT">COUNT</option>
                                        <option value="MIN">MIN</option>
                                        <option value="MAX">MAX</option>
                                        <option value="DISTINCT">DISTINCT</option>
                                        <option value="DISTINCT">COUNT_DISTINCT</option>
                                        <option value="AVG">AVG</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <div class="input-group-addon"
                                         style="color:white;background-color: #3c8dbc;border-color: #367fa9">
                                        度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量：
                                    </div>
                                    <select class="form-control select2" style="width: 100%" id="measures">

                                    </select>
                                </div>
                                <div class="form-group">
                                    <div class="input-group-addon"
                                         style="color:white;background-color: #3c8dbc;border-color: #367fa9">
                                        维&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度：
                                    </div>
                                    <select class="form-control select2" multiple="multiple"
                                            style="width: 100%;" id="dimensions">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <div class="input-group-addon"
                                         style="color:white;background-color: #3c8dbc;border-color: #367fa9">
                                        筛选条件：where
                                    </div>
                                    <input style="width: 100%;height: 30px"
                                           placeholder="" id="filter"
                                           type="text">
                                </div>
                                <div class="form-group">
                                    <div class="input-group-addon"
                                         style="color:white;background-color: #3c8dbc;border-color: #367fa9">
                                        字段排序：order by
                                    </div>
                                    <input style="width: 100%;height: 30px"
                                           placeholder="" id="orderby"
                                           type="text">
                                </div>
                                <button class="btn btn-primary" id="submit_ext">提交选项</button>
                            </div>
                            <div class="tab-pane fade" id="ios">
                                <textarea placeholder="Enter ..."
                                          style="width: 100%;height: 130px;resize:none;" id="sql_txt"></textarea>
                                <br/>
                                <button class="btn btn-primary" id="submit_sql">提交SQL</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9" hidden id="result_panel">
            <div class="box box-primary ng-scope">
                <div class="box-header with-border">
                    <h5 class="box-title">查询结果及可视化选项</h5>
                </div>
                <div class="box-body">
                    <div class="nav-tabs-custom" style="margin-bottom: 0px">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active"><a href="#grid" data-toggle="tab" id="grid_" aria-expanded="false">
                                表格</a></li>
                            <li class=""><a href="#pie" data-toggle="tab" id="pie_" aria-expanded="true">饼图</a></li>
                            <li class=""><a href="#bar" data-toggle="tab" id="bar_" aria-expanded="true">柱状图</a></li>
                            <li class=""><a href="#line" data-toggle="tab" id="line_" aria-expanded="true">折线图</a></li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="grid">
                                xxxx
                            </div>
                            <div class="tab-pane fade" id="pie">
                                <div style="width: 100%;height: 100%;overflow: auto">
                                    <div id="pie_r" alt="0" style="height: 620px;min-width: 100%"></div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="bar">
                                <div style="width: 100%;height: 100%;overflow: auto">
                                    <div id="bar_r" alt="0" style="height: 620px;min-width: 100%"></div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="line">
                                <div style="width: 100%;height: 100%;overflow: auto">
                                    <div id="line_r" alt="0" style="height: 620px;min-width: 100%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div id="hidden_txt" hidden></div>
{% endblock %}
{% block script %}
    <script>
        function add_class() {
            $('#treeview6').addClass('active');
            $('#menu6').addClass('menu-open');
            $('#reportdatakylin').addClass('active');
        }
        var flag = 0;

        $(".select2").select2({});
        $.ajax({
            url: '/data_report_kylin_get_cubes',
            success: function (data) {
                if (data.status == 'ok') {
                    for (var cube in data.cubes) {
                        $('#select_cubes').append('<option value="' + data.cubes[cube] + '">' + data.cubes[cube] + '</option>')
                    }
                    for (var i = 0; i < data.tables.length; i++) {
                        $('#dimensions').append('<optgroup label="' + data.tables[i] + '"></optgroup>');
                        for (var column_ in data.dimensions[data.tables[i]]) {
                            $('#dimensions optgroup:eq(' + i + ')').append('<option value="' + data.dimensions[data.tables[i]][column_] + '">' + data.dimensions[data.tables[i]][column_] + '</option>')
                        }
                    }
                    for (var mea in data.measures) {
                        $('#measures').append('<option value="' + data.measures[mea] + '">' + data.measures[mea] + '</option>')
                    }
                } else {
                    alert(data.status);
                }
                var table_desc = "事实表：" + data.fact_table + "<br/>" + "维度表：" + data.dimensions_tables;
                $('#table_desc p').html(table_desc);
            }
        });
        $('#select_cubes').on("change", function (e) {
            var cube_name = $("#select_cubes").find("option:selected").text();
            $.ajax({
                data: {cube_name: cube_name},
                url: '/data_report_kylin_get_cubes',
                success: function (data) {
                    $('#dimensions').empty();
                    $('#measures').empty();
                    if (data.status == 'ok') {
                        for (var i = 0; i < data.tables.length; i++) {
                            $('#dimensions').append('<optgroup label="' + data.tables[i] + '"></optgroup>');
                            for (var column_ in data.dimensions[data.tables[i]]) {
                                $('#dimensions optgroup:eq(' + i + ')').append('<option value="' + data.dimensions[data.tables[i]][column_] + '">' + data.dimensions[data.tables[i]][column_] + '</option>')
                            }
                        }
                        for (var mea in data.measures) {
                            $('#measures').append('<option value="' + data.measures[mea] + '">' + data.measures[mea] + '</option>')
                        }
                    } else {
                        alert(data.status);
                    }
                    var table_desc = "事实表：" + data.fact_table + "<br/>" + "维度表：" + data.dimensions_tables;
                    $('#table_desc p').html(table_desc);
                }
            });
            $('#result_panel').hide();
        });
        $('#submit_ext').on('click', function () {
            var tables = [];
            var dimensions = [];
            var measure = $('#measures').find("option:selected").text();
            var compute = $('#compute').find("option:selected").text();
            var dimension_nodes = $('#dimensions').find("option:selected");
            for (var i = 0; i < dimension_nodes.length; i++) {
                tables.push(dimension_nodes[i].parentNode.label);
                dimensions.push(dimension_nodes[i].parentNode.label + '.' + dimension_nodes[i].label);
            }
            $.ajax({
                data: {
                    'cube_name': $("#select_cubes").find("option:selected").text().trim(),
                    'tables': tables.toString(),
                    'measure': measure.trim(),
                    'compute': compute,
                    'dimensions': dimensions.toString(),
                    'filter': $("#filter").val(),
                    'orderby': $('#orderby').val()
                },
                url: '/data_report_kylin_get_result',
                success: function (result) {
                    sql_result(result);
                }
            })
            ;
        });
        var table_container = $('#grid');
        var table_example = '<table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">'
        $('#submit_sql').on('click', function () {
            $.ajax({
                data: {
                    'cube_name': $("#select_cubes").find("option:selected").text().trim(),
                    'sql': $('#sql_txt').val()
                },
                url: '/data_report_kylin_get_result',
                success: function (result) {
                    sql_result(result);
                }
            });

        });
        function sql_result(result) {
            if (result.status != "ok") {
                alert(result.status);
            } else {
                $('#hidden_txt').text(JSON.stringify(result.data));
                table_container.empty();
                table_container.append(table_example);
                $('#example1').DataTable({
                    data: result.rows,
                    destroy: true,
                    columns: result.columns,
                    order: []
                });
                $('#result_panel').show();
                $('#myTab a:first').tab('show');
                flag = 0;
                $('#pie_r').attr('alt', '0');
                $('#bar_r').attr('alt', '0');
                $('#line_r').attr('alt', '0');
            }
        }
        $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var type = $(e.target).attr('id');
            if ($('#' + type + 'r').attr('alt') == '1' || $('#' + type + 'r').attr('alt') == '2')
                return;
            if (type != "grid_") {
                if (type == "pie_")
                    $('#pie_r').empty();
                if (type == "bar_")
                    $('#bar_r').empty();
                if (type == "line_")
                    $('#line_r').empty();
                $.ajax({
                        type: 'POST',
                        data: {
                            type: type.trim(),
                            data: $('#hidden_txt').text().trim()
                        },
                        url: '/data_report_kylin_change_type',
                        success: function (result) {
                            if (result.status == 'ok') {
                                if (type == "pie_") {
                                    $('#pie_r').css('width', result.width);
                                    var mypie = echarts.init(document.getElementById('pie_r'), 'walden');
                                    mypie.setOption(result.data);
                                    $(function () {
                                        $('#pie_r').parent().resize(function () {
                                            mypie.resize();
                                        });
                                    });
                                    $('#pie_r').attr('alt', '1')
                                } else if (type == "bar_") {

                                    $('#bar_r').css('width', result.width);
                                    var mybar = echarts.init(document.getElementById('bar_r'), 'walden');
                                    mybar.setOption(result.data);
                                    $('#bar_r').attr('alt', '1');
                                    $(function () {
                                        $('#bar_r').parent().resize(function () {
                                            mybar.resize();
                                        });
                                    });
                                } else if (type == "line_") {
                                    result.data['tooltip']['formatter'] = function (params, ticket, callback) {
                                        var tip = '<b>' + params[0]['name'] + '</b>' + '<br/>';
                                        for (var item in params) {
                                            if (params[item]['data'] == '-')
                                                continue;
                                            tip = tip + params[item]['seriesName'] + ':' + params[item]['data'] + '<br/>'
                                        }
                                        return tip;
                                    };
                                    $('#line_r').css('width', result.width);
                                    var myline = echarts.init(document.getElementById('line_r'), 'walden');
                                    myline.setOption(result.data);
                                    $('#line_r').attr('alt', '1');
                                    $(function () {
                                        $('#line_r').parent().resize(function () {
                                            myline.resize();
                                        });
                                    });
                                }
                            }
                            else {
                                if (type == "pie_") {
                                    $('#pie_r').text(result.message);
                                    $('#pie_r').attr('alt', '2');
                                } else if (type == "bar_") {
                                    $('#bar_r').text(result.message);
                                    $('#bar_r').attr('alt', '2');
                                } else if (type == "line_") {
                                    $('#line_r').text(result.message);
                                    $('#line_r').attr('alt', '2');
                                }

                            }
                        }
                    }
                );
                flag = 1;
            }

        })
        ;
    </script>
{% endblock %}